<template>
    <Row :gutter="30">
        <Card style="margin:0 0 20px 0px">
            <Row class="form-row">
                <Form :rules="rule" label-position="right" :label-width="90" inline>
                    <FormItem label="小区名称" prop="name">
                        <div class="filters-input">
                            <el-select v-model="valueComany" placeholder="请选择小区" :clearable="true">
                                <el-option v-for="item in optionsCompany" :key="item.id" :label="item.name"
                                           :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="货柜个数" prop="Num">
                        <div class="filters-input">
                            <InputNumber placeholder="货柜个数" style="width: 250px;" v-model="Num" aria-placeholder="0"/>
                        </div>
                    </FormItem>
                    <FormItem label="货柜层数" prop="Tier">
                        <div class="filters-input">
                            <InputNumber placeholder="货柜层数" style="width: 250px;" v-model="Tier"/>
                        </div>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" size="large" icon="md-search" @click="seachData()">
                            查询
                        </Button>
                    </FormItem>
                </Form>
            </Row>

            <Row style="margin:0 0 20px 0 ">
                <Button type="primary" size="large" icon="md-add" @click="loadData()" style="margin-right: 10px;">
                    生成
                </Button>
                <Button type="primary" size="large" icon="md-cloud-download" target="_blank" @click="downLoad()">
                    下载
                </Button>
            </Row>
            <Table ref="table" border :data="tableData" :columns="columns">
            </Table>
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>
    </Row>

</template>
<script>
    //校验规则

    import baseURL from '_conf/url'

    const rules = {
        name: [
            {
                required: true,
                message: "请选择小区",
                trigger: "blur"
            }
        ]
    };
    export default {
        data() {
            //收件表格
            return {
                aa: "",

                //验证规则
                rule: rules,
                tableData: [],
                Tier: 0,
                Num: 0,
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                optionsCompany: [],
                valueComany: '',
                columns: [
                    {
                        title: "小区名称",
                        key: "housName"
                    },
                    {
                        title: "货柜号",
                        key: "number"
                    },
                    {
                        title: "二维码地址",
                        key: "erweimaPic"
                    }
                ]
            };
        },
        created: function () {
            this.postRequest("/api/kdStorage/queryHousing").then(res => {
                this.optionsCompany = res;
            });
        },
        methods: {
            downLoad() {
                if (this.valueComany != 0) {
                    let url = baseURL + "/api/kdStorage/myQrCode?housingId=" + this.valueComany;
                    window.location.href = url;
                } else {
                    this.$Message.warning("请选择小区");
                }
            },
            seachData() {
                if (this.valueComany != 0) {
                    let params = {};
                    params.deptId = this.valueComany;
                    params.pageSize = this.pageSize;
                    params.pageNum = this.pageNum;
                    this.postRequest("/api/kdStorage/queryQrCode", params).then(res => {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    });
                } else {
                    this.$Message.warning("请选择小区");
                }
            },
            loadData() {
                if (this.valueComany != 0) {
                    if (this.num != 0 && this.Tier != 0) {
                        let params = {};
                        params.id = this.valueComany;
                        params.num = this.Num;
                        params.tier = this.Tier;
                        this.postRequest("/api/kdStorage/qrCode", params).then(res => {
                            console.log(res)
                            this.$Message.success("生成成功!");
                            this.seachData();
                        });
                    } else {
                        this.$Message.warning("请输入货柜生成个数和层数！");
                    }
                } else {
                    this.$Message.warning("请选择小区");
                }
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.seachData();
            },
            handlePage(value) {
                this.pageNum = value;
                this.seachData();
            }
        }
    };
</script>
